<template>
    <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
            <el-page-header @back="changeShow(false)" content="分配权限">
            </el-page-header>
        </div>
        <div class="text item">
            <el-tree :data="permsList" ref="tree" show-checkbox node-key="id" default-expand-all :props="defaultProps"
                highlight-current>
            </el-tree>
            <div class="btn">
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button type="danger" @click="handleClear">清空</el-button>
            </div>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'role-permission',
    data() {
        return {
            // 树型默认参数
            defaultProps: {
                children: 'permsTrees',
                label: 'name'
            },
            // ID
            roleId: null
        }
    },
    methods: {
        // 展示分配菜单
        async showRolePermission(id) {
            this.roleId = id
            // 请求所有的权限列表
            let res = await this.$store.dispatch('getPermsList')
            if (!res.success) this.$message.error(res.message)
            else {
                // 请求该角色拥有的参数列表
                res = await this.$store.dispatch('getRolePerms', {
                    roleId: id
                })
                if (!res.success) this.$myfun.resError(res)
                else {
                    this.$refs.tree.setCheckedKeys(res.data.map(item => { return item.id }))
                    this.changeShow(true)
                }
            }
        },
        // 切换展示分配菜单
        changeShow(data) {
            this.$emit('changeShowRolePermission', data)
        },
        // 处理保存
        handleSave() {
            // 获取选中的菜单id
            let checkedNodes = this.$refs.tree.getCheckedNodes();
            let checkedMenuIds = new Set();
            if (checkedNodes != null && checkedNodes.length > 0) {
                for (let i = 0; i < checkedNodes.length; i++) {
                    let checkedNode = checkedNodes[i];
                    checkedMenuIds.add(checkedNode.id);
                    if (checkedNode.parentId !== 0) {
                        checkedMenuIds.add(checkedNode.parentId);
                    }   
                }
            }
            this.$confirm('是否分配菜单？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 保存菜单
                this.save(checkedMenuIds)
            }).catch(error => {

            })
        },
        // 清空
        handleClear() {
            this.$refs.tree.setCheckedKeys([]);
        },
        // 保存菜单
        async save(checkedMenuIds) {       
            let arry = Array.from(checkedMenuIds).filter(item => item !== undefined)
            let res = await this.$store.dispatch('saveRolePerms', {
                roleId: this.roleId,
                menuIds: arry
            })
            if (res.success) {
                this.$message.success(res.message)
                this.changeShow(false)
            }
            else this.$myfun.resError(res)
        }
    },
    computed: {
        permsList() {
            return this.$store.state.permission.permsList
        },
    }

}
</script>

<style scoped>
.btn {
    text-align: center;
}
</style>